<!-- JSON渲染器修复测试页面 -->
<template>
  <view class="json-fix-test-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">JSON渲染器修复测试</text>
      <text class="page-subtitle">验证组件属性映射是否正确</text>
    </view>

    <!-- 调试信息 -->
    <view class="debug-info">
      <view class="debug-title">调试信息</view>
      <view class="debug-content">
        <text class="debug-text">组件数量: {{ components.length }}</text>
        <text class="debug-text">配置状态: {{ configStatus }}</text>
      </view>
    </view>

    <!-- 渲染结果 -->
    <view class="render-result">
      <s-json-renderer 
        :config="testConfig"
        :debug="true"
        @componentEvent="onComponentEvent"
      />
    </view>

    <!-- 组件详情 -->
    <view class="component-details">
      <view class="details-title">组件详情</view>
      <view 
        v-for="(component, index) in components" 
        :key="index"
        class="component-item"
      >
        <text class="component-id">{{ component.id }}</text>
        <text class="component-props">{{ JSON.stringify(component.property, null, 2) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import SJsonRenderer from '@/sheep/components/s-json-renderer/s-json-renderer.vue';

  // 简化的测试配置
  const testConfig = ref({
    "page": {
      "description": "测试页面",
      "backgroundColor": "#f5f6fa"
    },
    "components": [
      {
        "id": "SearchNavbar",
        "property": {
          "searchPlaceholder": "搜索测试",
          "style": {
            "position": "relative",
            "top": "0",
            "left": "0",
            "right": "0",
            "zIndex": 999
          }
        }
      },
      {
        "id": "Carousel",
        "property": {
          "type": "default",
          "indicator": "custom",
          "autoplay": true,
          "interval": 0.5,
          "duration": 500,
          "circular": true,
          "items": [
            {
              "type": "img",
              "imgUrl": "https://picsum.photos/750/500?random=1&text=测试轮播图1",
              "title": "测试轮播图1",
              "url": "/pages/index/rental"
            },
            {
              "type": "img",
              "imgUrl": "https://picsum.photos/750/500?random=2&text=测试轮播图2",
              "title": "测试轮播图2",
              "url": "/pages/goods/list"
            }
          ],
          "style": {
            "height": "300rpx",
            "marginBottom": "20rpx"
          }
        }
      },
      {
        "id": "MenuSwiper",
        "property": {
          "layout": "iconText",
          "row": 1,
          "column": 3,
          "list": [
            {
              "title": "测试1",
              "titleColor": "#333",
              "emoji": "🚗",
              "bgColor": "#ff7675",
              "url": "/pages/index/rental",
              "badge": {
                "show": false
              }
            },
            {
              "title": "测试2",
              "titleColor": "#333",
              "emoji": "📖",
              "bgColor": "#74b9ff",
              "url": "/pages/index/index",
              "badge": {
                "show": true,
                "text": "HOT",
                "textColor": "#fff",
                "bgColor": "#ff4757"
              }
            },
            {
              "title": "测试3",
              "titleColor": "#333",
              "emoji": "📱",
              "bgColor": "#00b894",
              "url": "/pages/goods/list",
              "badge": {
                "show": false
              }
            }
          ],
          "style": {
            "bgColor": "#f5f6fa",
            "padding": "20rpx"
          }
        }
      }
    ]
  });

  // 计算属性
  const components = computed(() => {
    if (!testConfig.value.components) return [];
    return testConfig.value.components;
  });

  const configStatus = computed(() => {
    return testConfig.value.components ? '已加载' : '未加载';
  });

  // 组件事件处理
  const onComponentEvent = (event) => {
    console.log('组件事件:', event);
    uni.showToast({
      title: `${event.type}事件`,
      icon: 'none',
      duration: 1000
    });
  };

  // 页面加载时输出调试信息
  onMounted(() => {
    console.log('测试配置:', testConfig.value);
    console.log('组件列表:', components.value);
  });
</script>

<style lang="scss" scoped>
.json-fix-test-page {
  min-height: 100vh;
  background: #f5f6fa;

  .page-header {
    background: #fff;
    padding: 30rpx;
    text-align: center;
    border-bottom: 1rpx solid #e0e0e0;

    .page-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      display: block;
      margin-bottom: 12rpx;
    }

    .page-subtitle {
      font-size: 24rpx;
      color: #666;
      display: block;
    }
  }

  .debug-info {
    background: #fff;
    margin: 20rpx;
    padding: 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    .debug-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
    }

    .debug-content {
      .debug-text {
        font-size: 24rpx;
        color: #666;
        display: block;
        margin-bottom: 8rpx;
      }
    }
  }

  .render-result {
    margin: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }

  .component-details {
    background: #fff;
    margin: 20rpx;
    padding: 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    .details-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
    }

    .component-item {
      margin-bottom: 20rpx;
      padding: 16rpx;
      background: #f8f9fa;
      border-radius: 8rpx;
      border-left: 4rpx solid #007aff;

      .component-id {
        font-size: 24rpx;
        font-weight: 600;
        color: #007aff;
        display: block;
        margin-bottom: 8rpx;
      }

      .component-props {
        font-size: 20rpx;
        color: #666;
        font-family: 'Courier New', monospace;
        word-break: break-all;
        line-height: 1.4;
      }
    }
  }
}
</style>

